<script setup lang="ts">
const props = defineProps({
    name: {
        type: String
    },
    size: {
        type: Number
    },
    color: {
        type: Number
    },
    text: {
        type: String
    },
    align: {
        type: String
    }
})

const click = () => {
    console.log(props.name);
    console.log(props.size);
    console.log(props.color);
    console.log(props.text);
}
</script>

<template>
    <div class="icon-content" :style="{background: color}" @click="click">
        <div>
            <!-- <van-icon :class-prefix="`witdata witdata-${props.name}`" name="extra" :size="props.size"/> -->
            <i :class="`custom-icon custom-icon-${props.name}`" :style="{fontSize: props.size+'px'}"></i>
        </div>
        <div v-if="props.text != undefined">
            <p style="margin: 0;">{{ props.text }}</p>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.icon-content {
    height: 100%;
    // width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
</style>